<template>
  <div class="rich">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <div v-html="content"
         class="scroll"></div>
    <common-button :content="btnTitle"
                   @submit="handleSubmit"
                   v-if="isShow"></common-button>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
export default {
  name: 'NotFound',
  props: {
    btnTitle: String,
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      title: '',
      content: '',
      loading: true
    }
  },
  components: {
    CommonButton,
    CommonBack
  },
  created () {
    this.getContent()
  },
  methods: {
    handleSubmit () {
      console.log(1)
    },
    getContent () {
      this.title = this.$route.query.title
      const id = this.$route.query.id
      const page = this.$route.query.page
      if (page === 'about') {
        this.getInfo(id)
      }
    },
    getInfo (id) {
      this.$api.me.aboutDetail({ id })
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$errorTip()
          this.loading = false
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.content = data.content.content
        this.loading = false
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.rich
  background $common_bgc

.scroll
  padding()
  padding-top 98px
  box-sizing border-box
  padding-bottom 20px

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
